<template>
  <div class="score-analysis" ref="fullscreenElement">
	<div class="header">
		<h3>{{$route.query.title}}</h3>
		<p>
		  <b @click="toggleFullscreen"><img src="../../assets/image/qp.png" alt="">{{ isFullscreen ? "退出全屏" : "全屏(F11)" }}</b>
		  <!-- <em @click="addwebbard">进入讲评</em> -->
		</p>
	</div>
	<div style="height:48px;"></div>
    <!-- 固定在顶部的查询条件 -->
    <!-- <div class="query-section">
      <div class="query-form">
        <el-form :inline="true">
          <el-form-item label="考试ID">
            <el-input v-model="examId" placeholder="请输入考试ID" />
          </el-form-item>
          <el-form-item label="班级ID">
            <el-input v-model="classId" placeholder="请输入班级ID" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div> -->
    <!-- 内容区域，添加上边距以避免被固定查询条件遮挡 -->
    <!-- 成绩概览 -->
    <h3 class="scoreStateTitle">成绩概览</h3>
    <div class="content-section">
      <score-overview :exam-id="examId" :class-id="classId" :grade-id="gradeId" :subject-id="subjectId"
        ref="scoreOverviewRef" v-if="showComponents" />

      <!-- 分数分布 -->
      <score-distribution :exam-id="examId" :class-id="classId" :grade-id="gradeId" :subject-id="subjectId"
        ref="scoreDistributionRef" v-if="showComponents" />

      <!-- 作业分析 -->
      <homework-analysis v-if="showComponents" :exam-id="examId" :class-id="classId" :grade-id="gradeId"
        :subject-id="subjectId" ref="homeworkAnalysisRef" @load-error="handleLoadError" />

      <!-- 错题分布 -->
      <!-- <error-distribution
        v-if="showComponents"
        :exam-id="examId"
        :class-id="classId"
        ref="errorDistributionRef"
      /> -->

      <!-- 作业汇总 -->
      <homework-summary v-if="showComponents" :exam-id="examId" :class-id="classId" :grade-id="gradeId"
        :subject-id="subjectId" ref="homeworkSummaryRef" />
    </div>
    <div class="leftbarcontent">
      <div class="zdbutton" @click="toolhidden" :class="{ 'zdbutton-visible': !isToolShowVisible }"></div>
      <ul class="leftbar" :class="{ 'toolshow-visible': isToolShowVisible }">
        <li v-for="(group, index) in menuGroups" :key="index">
          <template v-if="group.title">
            <span>{{ group.title }}</span>
          </template>
          <a v-for="(item, i) in group.items" :key="i" href="#" @click.prevent="selectMenuItem(item.id)"
            :class="{ 'active': selectedItem === item.id }">
            {{ item.text }}
          </a>
        </li>
      </ul>
      <!-- <ul class="leftbar" :class="{ 'toolshow-visible': isToolShowVisible }">
			<li>
				<span>成绩概览</span>
        <a href="#" @click.prevent="scrollToSection('#High-frequency-incorrect-questions')">高频错题</a>
				<a href="#" @click.prevent="scrollToSection('#Homework-score')">作业得分表</a>
				<a href="#" @click.prevent="scrollToSection('#fluctuate-student')">上升/下降学生</a>
			</li>
			<li>
				<span>作业总览</span>
				<a href="#" @click.prevent="scrollToSection('#fractional-distribution')">分数段分布图表表格</a>
				<a href="#" @click.prevent="scrollToSection('#Two-point-five-rate')">两分五率</a>
				<a href="#" @click.prevent="scrollToSection('#student-distribution')">学优生学困生分布</a>
        <a href="#" @click.prevent="scrollToSection('#student-distributionname')">学优生名单</a>
			</li>
			<li>
				<span>作业分析</span>
				<a href="#" @click.prevent="scrollToSection('#Homework-quality')">作业质量</a>
				<a href="#" @click.prevent="scrollToSection('#Test-score-rate')">试题得分率</a>
        <a href="#" @click.prevent="scrollToSection('#Test-knowledge-rate')">知识点得分率</a>
				<a href="#" @click.prevent="scrollToSection('#Small-question-analysis')">小题分析</a>
				<a href="#" @click.prevent="scrollToSection('#Objective-Question-Answering')">客观题作答分布</a>
				<a href="#" @click.prevent="scrollToSection('#subjective-Question-Answering')">主观题作答分布</a>
				<a href="#" @click.prevent="scrollToSection('#Distribution-Wrong-Questions')">错题分布</a>
				<a href="#" @click.prevent="scrollToSection('#two-way-checklist')">双向细目表</a>
			</li>
			<li>
				<a href="#" @click.prevent="scrollToSection('#homework-summary')" style="color:#2A303B">作业周/月汇总</a>
			</li>
		</ul> -->
	</div>
	
  </div>
</template>

<script>
import ScoreOverview from './components/ScoreOverview.vue'
import ScoreDistribution from './components/ScoreDistribution.vue'
import HomeworkAnalysis from './components/HomeworkAnalysis.vue'
import HomeworkSummary from './components/HomeworkSummary.vue'
import ErrorDistribution from './components/ErrorDistribution.vue'

export default {
  name: 'ScoreAnalysis',
  components: {
    ScoreOverview,
    ScoreDistribution,
    HomeworkAnalysis,
    HomeworkSummary,
    ErrorDistribution
  },
  data () {
    return {
      examId: '',
      classId: '',
      showComponents: false,
      isToolShowVisible: true,
      isFullscreen: false, // 当前是否处于全屏状态
      gradeId: '',
      subjectId: '',
      selectedItem: 'High-frequency-incorrect-questions',
      menuGroups: [
        {
          title: '成绩概览',
          items: [
            { id: 'Homework-score', text: '成绩单' },
            { id: 'High-frequency-incorrect-questions', text: '高频错题' },
            { id: 'Objective-Question-Answering', text: '客观题作答分布' },
            { id: 'subjective-Question-Answering', text: '主观题作答分布' },
            { id: 'fluctuate-student', text: '上升/下降学生' }
          ]
        },
        {
          title: '作业总览',
          items: [
            { id: 'fractional-distribution', text: '分数段分布图表表格' },
            { id: 'Two-point-five-rate', text: '两分五率' },
            { id: 'student-distribution', text: '学优生学困生分布' },
            { id: 'student-distributionname', text: '学优生名单' }
          ]
        },
        {
          title: '作业分析',
          items: [
            { id: 'Homework-quality', text: '作业质量' },
            { id: 'Test-score-rate', text: '试题得分率' },
            { id: 'Test-knowledge-rate', text: '知识点得分率' },
            { id: 'Small-question-analysis', text: '小题分析' },
            { id: 'Distribution-Wrong-Questions', text: '错题分布' },
            { id: 'two-way-checklist', text: '多维细目表' }
          ]
        },
        {
          items: [
            { id: 'homework-summary', text: '作业周/月汇总' }
          ]
        }
      ],
    }
  },
  methods: {
    selectMenuItem (itemId) {
      this.selectedItem = itemId;
      // 这里可以添加你的滚动逻辑
      this.scrollToSection(`#${itemId}`);
    },
    scrollToSection (selector) {
      // 如果组件还没有渲染，等待组件渲染完成
      if (!this.showComponents) {
        console.warn('组件尚未渲染，等待渲染完成...');
        return;
      }

      this.$nextTick(() => {
        // 给组件额外的时间渲染内部元素
        setTimeout(() => {
          const target = document.querySelector(selector);
          if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
          } else {
            console.warn(`Element with selector "${selector}" not found`);
            // 显示所有可用ID用于调试
            const allIds = Array.from(document.querySelectorAll('[id]')).map(el => el.id);
            console.log('页面中所有可用的ID:', allIds);
          }
        }, 100);
      });
    },
    async handleQuery () {
      if (!this.examId || !this.classId) {
        this.$message.warning('缺少必要参数');
        return;
      }

      this.showComponents = true;
      // 等待组件渲染完成
      await this.$nextTick();

      // 只调用必要的组件加载
      const loadPromises = [];

      if (this.$refs.scoreOverviewRef && !this.$refs.scoreOverviewRef.hasData) {
        loadPromises.push(this.$refs.scoreOverviewRef.loadData());
      }

      if (this.$refs.scoreDistributionRef && !this.$refs.scoreDistributionRef.chartData?.length) {
        loadPromises.push(this.$refs.scoreDistributionRef.loadData());
      }

      if (this.$refs.homeworkAnalysisRef && !this.$refs.homeworkAnalysisRef.hasData) {
        loadPromises.push(this.$refs.homeworkAnalysisRef.loadData());
      }

      try {
        await Promise.all(loadPromises);
      } catch (error) {
        console.error('数据加载失败:', error);
        this.$message.error('部分数据加载失败');
      }
    },
    handleLoadError (error) {
      this.$message.error(error.message || '加载数据失败')
    },
    toolhidden () {
      this.isToolShowVisible = !this.isToolShowVisible; // 切换抽屉状态
    },// 切换全屏
    toggleFullscreen () {
      if (!document.fullscreenEnabled) {
        alert("您的浏览器不支持全屏功能！");
        return;
      }

      if (this.isFullscreen) {
        // 退出全屏
        document.exitFullscreen();
        this.$refs.fullscreenElement.style.overflow = 'auto';
      } else {
        // 进入全屏
        this.$refs.fullscreenElement.requestFullscreen();
        this.$refs.fullscreenElement.style.overflow = 'auto';
      }
    },
	//进入讲评
	addwebbard(){
		window.location.href=`https://wb.bsedu.com?examId=${this.$route.query.examId}&classId=${this.$route.query.classId}&title=${this.$route.query.title}`
		// window.open(`https://wb.bslmedu.com?examId=${this.$route.query.examId}&classId=${this.$route.query.classId}&title=${this.$route.query.title}`)
	},
    // 处理全屏状态变化
    handleFullscreenChange () {
      this.isFullscreen = !!document.fullscreenElement;
    }
  },
  mounted () {
    // 监听全屏状态变化
    document.onfullscreenchange = this.handleFullscreenChange;
    this.examId = this.$route.query.examId
    this.classId = this.$route.query.classId
    this.gradeId = this.$route.query.gradeid
    this.subjectId = this.$route.query.subjectid
    console.info()
    if (this.examId && this.classId) {
      this.handleQuery()
    }
  }
}
</script>

<style scoped>
.score-analysis {
  /* 移除原有内边距 */
  width: 100%;
  background: #F4F7FD;
  padding-bottom: 24px;
  scroll-margin-top: 20px;
}

.header {
  height: 48px;
  background: #4985FF;
  box-shadow: 0 2px 10px 0 #00000080;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background: #2379F6;
  font-size: 16px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

.header h3 {
  font-weight: normal;
  font-size: 16px;
}

.header p {
  display: flex;
}

.header p b {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 134px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  border: 1px solid #FFFFFF;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  margin-right: 14px;
  font-weight: normal;
}

.header p b img {
  width: 16px;
  margin-right: 8px;
}

.header p em {
  display: inline-block;
  width: 108px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 17px;
  border: 1px solid #FFFFFF;
  color: #2379F6;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  font-style: normal;
}

/* 固定在顶部的查询条件 */
.query-section.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
}

/* 内容区域添加上边距，避免被固定查询条件遮挡 */
.content-section {
  box-sizing: border-box;
  margin: 0px 140px 0;
  /* 根据查询条件的高度调整 */
}

.scoreStateTitle {
  font-size: 18px;
  color: #295CFF;
  line-height: 45px;
  margin: 0 140px;
  font-weight: normal;
  position: relative;
  padding-left: 25px;
  font-weight: bold;
}

.scoreStateTitle:after {
  content: '';
  width: 14px;
  height: 14px;
  opacity: 0.5;
  background: #295CFF;
  border-radius: 14px;
  position: absolute;
  left: 0;
  top: 15px;
}

.scoreStateTitle::before {
  content: '';
  width: 8px;
  height: 8px;
  opacity: 0.2;
  background: #295CFF;
  border-radius: 14px;
  position: absolute;
  left: 10px;
  top: 23px;
}

.query-section {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
}

.query-form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 适配移动端 */
@media screen and (max-width: 768px) {
  .query-form {
    flex-direction: column;
    align-items: stretch;
  }

  .el-form--inline .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .content-section {
    margin-top: 160px;
    /* 移动端查询条件可能会更高 */
  }
}

.leftbar {
  background: rgb(250, 251, 254);
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 0 0px 10px 0;
  position: absolute;
  left: 0;
  top: 14px;
  width: 130px;
  transition: transform 0.3s ease-in-out;
  /* 添加过渡效果 */
  transform: translateX(-100%);
  /* 默认隐藏 */
}

.zdbutton {
  width: 130px;
  display: block;
  height: 14px;
  background: #ffffff url(../../assets/image/sq.png) no-repeat 110px center;
  background-size: 13px 13px;
  cursor: pointer;
  border-radius: 0 10px 0 0;
}

.toolshow-visible {
  transform: translateX(0);
  /* 显示 */
}

.leftbar li span,
.leftbar li a {
  display: block;
  border-bottom: 1px solid #F5F6F8;
  line-height: 32px;
  font-size: 12px;
  padding: 0 10px;
}

.leftbar li span {
  color: #2A303B;
  font-weight: bold;
}

.leftbar li a {
  color: #5B6371;
  text-decoration: none;
}

.leftbar a:hover {
  background-image: linear-gradient(90deg, #295cff24 0%, #ffffff00 100%);
  border-left: 3px solid #295CFF
}

.leftbar a.active {
  background-image: linear-gradient(90deg, #295cff24 0%, #ffffff00 100%);
  border-left: 3px solid #295CFF
}

.leftbar a.active:hover {
  background-image: linear-gradient(90deg, #295cff24 0%, #ffffff00 100%);
  border-left: 3px solid #295CFF
}

.leftbarcontent {
  position: fixed;
  left: 0;
  top: 60px;
}

.zdbutton-visible {
  width: 130px;
  display: block;
  height: 14px;
  position: relative;
  background: #ffffff;
  cursor: pointer;
  border-radius: 0 10px 0 0;
}

.zdbutton-visible::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  width: 15px;
  height: 15px;
  background: url(../../assets/image/sq.png) no-repeat center;
  background-size: 13px 13px;
}
</style>
<style>
.el-table th {
  border-color: rgba(216, 228, 240, 1) !important;
}
</style>